<template>
  <el-row class="data-header">
    <span class="header-title">{{name}}</span>
    <svg class="icon header-icon" aria-hidden="true">
      <use xlink:href="#icon-rili"></use>
    </svg>
    <span class="date-value">{{dayValue}}</span>

    <el-button :loading="downloadLoading" size="mini" type="info" plain icon="el-icon-document" class="export-btn"
               @click="exportExcel" v-if="type == 1">导出
    </el-button>
  </el-row>
</template>

<script>
  import {formatDate} from "@/utils/index";
  import {baseUrl} from "@/api/constant";
  import {getToken} from "../../../utils/auth";

  export default {
    name: "DataHeader",
    data() {
      return {
        downloadLoading: false,
        dataTime: new Date()
      }
    },
    props: {
      type: {
        type: Number,
        default: 0
      },
      name: {
        type: String,
        default: '系统注册数据'
      }
    },
    computed: {
      dayValue() {
        return formatDate(new Date(), 'yyyy年MM月dd日');
      }
    },
    methods: {
      exportExcel() {
        this.downloadLoading = true;
        this.axios.defaults.headers.common["tk"] = getToken();
        this.axios(
          {
            method: 'POST',
            url: baseUrl + '/pageView/export_page_view?time=' + formatDate(this.dataTime, 'yyyy-MM-dd'),
            responseType: 'blob' //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置
          }
        ).then(response => {
          if (response.status == 200) {
            const time = formatDate((new Date()), 'yyyy-MM-dd hhmmss');
            const blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});
            let fileName = `系统访问数据报表${time}.xls`;

            if (window.navigator && window.navigator.msSaveOrOpenBlob) {//兼容ie
              window.navigator.msSaveBlob(blob, fileName)
            } else {
              const linkNode = document.createElement('a');

              linkNode.download = fileName; //a标签的download属性规定下载文件的名称
              linkNode.style.display = 'none';
              linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
              document.body.appendChild(linkNode);
              linkNode.click();  //模拟在按钮上的一次鼠标单击

              URL.revokeObjectURL(linkNode.href); // 释放URL 对象
              document.body.removeChild(linkNode);
            }
          } else {
            this.$message.error({message: `导出失败，请重试【${response.status}】`, duration: 2000});
          }
          this.downloadLoading = false;
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .data-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(216, 220, 230, 1);
    .header-title {
      padding-left: 20px;
      padding-right: 22px;
      font-size: 18px;
      font-weight: bold;
      color: rgba(61, 68, 77, 1);
    }
    .header-icon {
      width: 12px;
      height: 12px;
    }
    .date-value {
      margin-left: 5px;
      font-size: 14px;
      color: rgba(210, 212, 217, 1);
    }
    .export-btn {
      margin-left: auto;
      margin-right: 20px;
    }
  }
</style>
